<template>
	<view class="audio-warp">
		<view class="cover-warp" :class="{ hasbg: !poster }">
			<image src="../../../../static/voice.png" mode="widthFix" style="width: 100%;height: 100%;">
			</image>
		</view>
		<view class="audio-con">
			<view class="info">
				<text class="audio-title am-text-eill">{{ name }}</text>
				<text class="audio-author am-text-eill" v-if="showCurrentTime == false">{{duration}}</text>
				<text class="audio-author am-text-eill" v-else>{{audioTimeUpdate}}</text>
			</view>
			<view class="playbtn" :class="{ pause: play }" @click="handleBtnClick"></view>
			<view class="delebtn" @click="handleDel">
				<image src="/static/voice.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * luch-audio 0.0.1
	 * @module luch-audio
	 * @Author lu-ch
	 * @Date 2019-06-11
	 * @Email webwork.s@qq.com
	 * @description 音频播放组件，使用了createInnerAudioContext
	 */
	/**
	 * Props itemsProps
	 * @prop {Boolean} play - 是否播放，双向绑定，绑定时需使用.sync 如果为true 则播放，为false 则暂停
	 * ... 其他api同文档 （https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext）
	 */
	/**
	 * 将秒转换为 分:秒
	 * @param {Number} s - 秒数
	 */
	function sToHs(s) {
		//计算分钟
		//算法：将秒数除以60，然后下舍入，既得到分钟数
		let h;
		h = Math.floor(s / 60);
		//计算秒
		//算法：取得秒%60的余数，既得到秒数
		s = s % 60;
		//将变量转换为字符串
		h += '';
		s += '';
		//如果只有一位数，前面增加一个0
		h = (h.length === 1) ? '0' + h : h;
		s = (s.length === 1) ? '0' + s : s;
		return h + ':' + s;
	}
	export default {
		name: 'ComAudio',
		props: {
			play: {
				type: Boolean,
				required: true
			},
			src: {
				type: String
			},
			poster: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: '音频1'
			},
			author: {
				type: String,
				default: '未知作者'
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			},
			obeyMuteSwitch: {
				type: Boolean,
				default: true
			},
			audioDuration: {
				type: Number
			}
		},
		data() {
			return {
				audioTimeUpdate: '00:00',
				innerAudioContext: '',
				duration: '00:00',
				showCurrentTime: false
			};
		},
		mounted() {
			this.$nextTick(() => {
				console.log("this.audioDuration", this.audioDuration);
				if (this.audioDuration == 0) {
					this.duration = '00:00';
				} else {
					this.duration = sToHs(Math.floor(this.audioDuration / 1000));
				}
			})
		},
		methods: {
			audioPlay() {
				this.$emit('update:play', true);
			},
			audioPause() {
				this.$emit('update:play', false);
			},
			handleBtnClick() {
				this.showCurrentTime = true;
				this.$emit('update:play', !this.play);
			},
			handleDel() {
				this.$emit('delete', true);
			},
			contextInit() {
				console.log('创建');
				let that = this;
				that.$emit('update:play', false);
				let innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = that.autoplay;
				innerAudioContext.src = that.src;
				innerAudioContext.loop = that.loop;
				innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch;
				innerAudioContext.onPlay(function() {
					that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
					that.audioPlay();
				});
				innerAudioContext.onPause(function() {
					that.audioPause();
				});
				innerAudioContext.onEnded(function() {
					this.showCurrentTime = false;
					that.audioPause();
				});
				innerAudioContext.onTimeUpdate(function() {
					that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				});
				innerAudioContext.onError(err => {
					console.log(err);
				});
				this.innerAudioContext = innerAudioContext;
			},
		},
		watch: {
			play(n) {
				if (n) {
					this.innerAudioContext.play();
				} else {
					this.innerAudioContext.pause();
				}
			},
			src() {
				this.innerAudioContext.destroy();
				this.contextInit();
			},
			audioDuration(val) {
				console.log("音频111", val);
				this.duration = sToHs(Math.floor(val / 1000));
			}
		},
		created() {
			this.contextInit();
		},
		beforeDestroy() {
			this.innerAudioContext.destroy();
		}
	};
</script>

<style lang="scss">
	.am-text-eill {
		/*超出省略号*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.audio-warp {
		display: flex;
		overflow: hidden;
		// height: 67px;
		height: 62px;
		border-radius: 3px;
		border: 1px solid #e0e0e0;
	}

	.cover-warp {
		position: relative;
		flex-shrink: 0;
		width: 65px;
		height: 100%;

		&.hasbg {
			background-color: #e6e6e6;
		}

		.cover-img {
			width: 100%;
			height: 100%;
		}
	}

	.audio-con {
		position: relative;
		flex: 1;
		display: flex;
		width: 0;
		padding: 0 15px;
		align-items: center;
		background-color: #fcfcfc;

		.info {
			width: 100%;
		}

		.audio-title {
			display: block;
			padding-bottom: 7px;
			padding-right: 25px;
			font-size: 14px;
			color: #353535;
		}

		.audio-author {
			display: block;
			font-size: 12px;
			color: #888888;
		}

		.audio-time {
			position: absolute;
			right: 15px;
			top: 6px;
			font-size: 13px;
			color: #9d9d9d;
		}

		.playbtn {
			position: absolute;
			left: 65%;
			top: 50%;
			width: 58rpx;
			height: 58rpx;
			transform: translateX(-50%) translateY(-50%);
			border-radius: 50%;
			background-size: 100% 100%;
			background-image: url(/static/feedback.png);

			&.pause {
				background-image: url(/static/feedback.png);
			}
		}

		.delebtn {
			position: relative;
			left: -30rpx;
			top: 8rpx;

			image {
				width: 30rpx;
				height: 28rpx;
			}
		}
	}
</style>